<template>
<el-table class="table" :data="data" :size='size' stripe border @current-change='currentChange' 
  style='width: 100%' 
  :highlight-current-row='highlightCurrentRow'>
  <slot name='ahead'></slot>
  <!-- :fixed='i === 0 ? true : false' -->
  <el-table-column
    v-for="(col, i) in cols"
    :key="col.prop"
    :label="col.label"
    v-if="!col.hide"
    :align="col.align || 'center'"
    :min-width='col.minWidth || "100%"'
    :width='col.width || "auto"'
    v-bind="col">
    <!-- 可用具名插槽来自定义，也可以使用默认显示 -->
    <template slot-scope="scope">
      <slot :name="col.prop" :row="scope.row">
        {{col.filter ? col.filter(scope.row[col.prop]) : scope.row[col.prop]}}
      </slot>
    </template>
  </el-table-column>
  <!-- 额外的列，例如 操作 -->
  <slot></slot>
</el-table>
</template>

<style lang="less"></style>

<script>
export default {
  name: 'a-table',
  props: {
    'highlightCurrentRow': false,
    data: {
      type: Array,
      default() {
        return []
      }
    },
    cols: {
      type: Array,
      required: true
    },
    selection: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    currentChange(value) {
      this.$emit('current-change', value)
    },
    onSelect(rows) {
      this.$emit('selection-change', rows)
    }
  }
}
</script>
